<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<%@include file="/common/head.jsp" %>
	<title>Insert title here</title>
</head>
<body>

<!-- 查询条件 -->
	<div style="margin-top: 15px; margin-left:10px;">
		<input id="bookname" class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px;">
		<a id="bookQry" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  
	</div>
	
	<!-- 信息表格显示 -->
	<div id="p" class="easyui-panel" style="padding:10px" data-options="fit:true, border:false">
                   
    	<table id="bookTable" class="easyui-datagrid"  style="width:100%;height:90%;"> 
    	</table>
    	
	</div>
	
	<!-- 列表上方的工具条 -->
	<div id="bookTableToolbar" style="text-align: right;">
		<a href="#" id="addBookBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"/a>
		<a href="#" id="editBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
		<a href="#" id="delBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"/a>
	</div>
	
	<div id="bookDiglog" style="display:none;"></div> 
	
	<script>
	$(function() {
		
		$('#bookTable').datagrid({
			title:'书本信息列表',
			url:'${ctx}/bookAction.action?methodName=listBooks',
		    pagination:true,
		    singleSelect:true,
		    columns:[[    
		        {field:'id',title:'书本ID',width:100},    
		        {field:'bookName',title:'名称',width:100},    
		        {field:'bookPrice',title:'价格',width:100,align:'right'},
		        {field:'bookType',title:'类型',width:100,align:'right'}
		    ]],
		    
		    onDblClickRow:function(index,row) {
		 		$.messager.alert('消息',row.bookname,'info');
		 	},
		 	
		 	toolbar: '#bookTableToolbar'
			
		});
		
		queryBooks();
		
		$("#bookQry").click(function() {
			queryBooks();
		});
		
		
		//查询书本信息
		function queryBooks() {
			$('#bookTable').datagrid('load', {
				bookname: $("#bookname").val()
			});
		};
		
		$("#editBootBtn").click(function() {
			let row = $("#bookTable").datagrid("getSelected");
			if(!row) {
				$.messager.alert('消息', '请选择需要修改的记录');
				return;
			}
			openDialog(row);
		});
		
		
		//新增
		$("#addBookBtn").click(function() {
			openDialog();
		});
		
		
		//打开对话框，如果row有值则标题为修改，如果没有值则为新增
		function openDialog(row) {
			
			let title = "增加书本";
			let methodName = 'add';
			if(row) {
				title = "修改书本";
				methodName = 'update';
			}

			$('#bookDiglog').dialog({
			    title: title,    
			    width: 400,    
			    height: 240,    
			    closed: false,    
			    cache: false,    
			    href: 'editBook.jsp',
			    modal: true,
			    buttons:[
			    	{
			    		text: '保存',
			    		handler: function() {
			    			
			    			$.ajax({
			    				url: "${ctx}/bookAction.action?methodName=" + methodName,
			    				type: 'POST',
			    				dataType: 'JSON',
			    				data: $('#bookForm').serialize(),
			    				success: function (result) {
			    	                $.messager.alert('消息', '操作成功');
			    	                if(result.success) {
			    	                	$('#bookDiglog').dialog('close');
			    	                	queryBooks();
			    	                }
			    	            },
			    	            error : function(error) {
			    	            	console.log(error);
			    	            }
			    			});
			    		
			    		}
			    	},
			    	{
			    		text: '关闭',
			    		handler: function() {
			    			alert("close");
			    		}
			    	}
			    ],
			    
			    //当用户点击更新时，将原数据显示出来，row是从表格对象获取的用户选择的记录数据
			    onLoad: function() {
			    	debugger;
			    	if(row) {
			    		$("#bookForm").form("reset");
				    	$("#bookForm").form("load", row);
			    	}
			    }
			});
		};
	});
	</script>

</body>
</html>